<template>
  <div>
    <h1>{{obj.a}}</h1>
    <h1>{{obj.b.c}}</h1>
    <h1>{{obj2.a}}</h1>
    <h1>{{obj2.b.c}}</h1>
    <button @click="changeValue">changeValue</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,shallowReactive } from 'vue'

export default defineComponent({
  setup () {
    const obj = reactive({
      a:1,
      b:{
        c:2,
      },
    });
    const obj2 = shallowReactive({
      a:1,
      b:{
        c:2,
      },
    });
    const changeValue = () =>{
      obj2.a += 1;
      obj2.b.c += 2;
    };


    return {
      obj,
      obj2,
      changeValue,
    }
  }
})
</script>

<style scoped>

</style>
